<template>
  <n-menu
    v-model:value="valueRef"
    :collapsed="props.collapsed"
    :collapsed-width="64"
    :expanded-keys="expandedKeysRef"
    @update:expanded-keys="evt => expandedKeysRef = evt"
    :collapsed-icon-size="22"
    :options="store.menus"
  />
</template>

<script setup>
import { ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import { NMenu } from 'naive-ui'
import { useStore } from '/@/store'

const props = defineProps({
  collapsed: {
    type: Boolean,
    default: false
  }
})

const store = useStore()
const route = useRoute()
const {
  path,
  meta: {
    expandedKeys = []
  }
} = route

const expandedKeysRef = ref(expandedKeys)
const valueRef = ref(path)

watch(
  () => route.path,
  path => {
    const { meta: { expandedKeys = [] }} = route

    expandedKeysRef.value = expandedKeys
    valueRef.value = path
  }
)
</script>
